Stacked Tab View

ABSTRACT

Stacked tab views are described. A computing device can display multiple content panes in a web browser window. Each content pane can correspond to a different web site. The content panes can be arranged in a visual stack, where content pane are positioned one in front of another in a three-dimensional view. In the three-dimensional view, a distance between content panes can appear to separate the content panes. Each content pane can display snapshot image of content of a web site. The content panes can be used in place of tabs for navigating between web pages.

CROSS-REFERENCE TO RELATED APPLICATIONS

This application claims priority to U.S. Provisional Patent ApplicationNo. 61/832,915, filed Jun. 9, 2013, and U.S. patent application Ser. No.14/198,099, filed Mar. 5, 2014, the entire contents of which areincorporated herein by reference.

TECHNICAL FIELD

This disclosure relates generally to graphical user interface items.

BACKGROUND

A web browser can implement a tabbed graphical user interface (GUI). Abrowser implementing tabbed GUI can allow a user to open multiple webpages in a single browser window. The browser can display multiple tabsside by side, usually at or near the top of the browser window. Each tabcan correspond to a different web page. When the browser receives a userselection of a tab, a pane of the browser window, usually below thetabs, can display a corresponding web page. A user can switch betweenweb pages by clicking different tabs.

SUMMARY

Stacked tab views are described. A computing device can display multiplecontent panes in a web browser window. Each content pane can correspondto a different web site. The content panes can be arranged in a visualstack, where content pane are positioned one in front of another in athree-dimensional view. In the three-dimensional view, a distancebetween content panes can appear to separate the content panes. Eachcontent pane can display snapshot image of content of a web site. Thecontent panes can be used in place of tabs for navigating between webpages.

The computing device can display content of a web page in a full screenmode upon receiving a user selection selecting a content panecorresponding to that web page. In addition, the computing device canorder the content panes upon receiving a user input. In response to auser input moving a content pane from an original position to a newposition, the computing device can move that content pane in an animatedmotion, where another content pane, if in the way between the originalposition and the new position, ducks in response to the movement of themoving content pane.

The features described in this specification can be implemented toachieve one or more advantages. For example, compared to a conventionaltab control, a computing device implementing stacked tab view canprovide a preview of multiple web pages in one display screen. Thepreviews can help a user to select a web site that the user wishes tovisit. Smooth animation provided in rearranging the content panes can bemore life-like and intuitive than conventional tab controls.

The details of one or more implementations of stacked tab view are setforth in the accompanying drawings and the description below. Otherfeatures, aspects, and advantages of stacked tab view will becomeapparent from the description, the drawings, and the claims.

BRIEF DESCRIPTION OF THE DRAWINGS

FIG. 1 is a diagram illustrating an exemplary stacked tab view.

FIGS. 2A and 2B are diagrams illustrating exemplary animations ofrearranging positions of content panes in a stacked tab view.

FIGS. 2C and 2D are diagrams illustrating exemplary animations ofrolodex-like operations of a stacked tab view.

FIG. 3A is a diagram illustrating exemplary operations of closing acontent pane.

FIG. 3B is a diagram illustrating an exemplary content pane in grid modeupon selection from a stacked tab view.

FIG. 3C is a diagram illustrating an exemplary content pane in list modeupon selection from a stacked tab view.

FIG. 3D is a diagram illustrating an exemplary snapshot operations of acontent pane in a stacked tab view.

FIG. 4 is a diagram illustrating components of an exemplary stacked tabview subsystem of a computing device.

FIGS. 5A-5C are flowcharts of exemplary procedure of stacked tab view.

FIG. 6 is a block diagram illustrating an exemplary device architectureof a computing device implementing the features and operations of FIGS.1-5.

FIG. 7 is a block diagram of an exemplary network operating environmentfor computing devices implementing the features and operations of FIGS.1-5.

Like reference symbols in the various drawings indicate like elements.

DETAILED DESCRIPTION Exemplary Stacked Tab View

FIG. 1 is a diagram illustrating an exemplary stacked tab view. Thefeatures and operations of the stacked tab view can be implemented bycomputing device 102. Computing device 102 can be a stationary device(e.g., a cloud computing server) or a mobile device (e.g., a tabletcomputer, a smart phone, or a wearable computing device). Computingdevice 102 can include or be coupled to display surface 106 (e.g., atouch-sensitive display screen). Computing device 102 can execute acomputer program (e.g., a web browser) that displays content on displaysurface 106.

Computing device 102 can display content panes 110, 112, 114, and 116 ondisplay surface 106. Each of content panes 110, 112, 114, and 116 can bea visual area corresponding to a same or different web page. Each ofcontent panes 110, 112, 114, and 116 can include a snapshot (e.g., animage) of content of the corresponding web page. Content panes 110, 112,114, and 116 can be arranged as a three-dimensional visual stack. Forexample, each of content panes 110, 112, 114, and 116 can appearstanding upright from a base surface (e.g., a visible or invisiblefloor). A distance (e.g., distance 118) on a Z-axis can separate each ofcontent panes 112, 114, 116 from another content pane. Each of contentpanes 112, 114, 116 can be partially obscured by a content pane in frontof it (e.g., that appears closer to a user). The obscured portions ofcontent panes 112, 114, 116 are illustrated using dashed lines in FIG.1.

Computing device 102 can receive a selection input (e.g., a touch input)selecting one of content panes 112, 114, 116. Upon receiving theselection input, computing device 102 can display content of the webpage corresponding to the selected content pane in full screen mode.Displaying the content in full screen mode can include rendering thecontent, and optionally, one or more control items (e.g., a navigationtoolbar including control items for navigating between web pages) and/orone or more decorative items on the entire area of display surface 106.

Computing device 102 can receive position gesture input 120 for movingcontent pane 112 forward. Position gesture input 120 can be a forwardgesture, where a stylus or finger touches an un-obscured portion ofcontent pane 112 and, while touching the un-obscured portion of contentpane 112, swipes down toward a bottom edge of display surface 106,appearing toward a user. In response, computing device 102 can shiftcontent pane 112 and content panes 114 and 116, which are located behindcontent pane 112, forward (e.g., toward a user). In variousimplementations, distances between content panes 112, 114, and 116 canincrease, or, additionally or alternatively, a new content pane canappear behind content pane 116. Computing device 102 can increase thedistances, add the new content pane, or both, upon determining that theforward gesture has reached a threshold (e.g., a threshold distance or athreshold speed).

Position gesture input 120 can move content pane 112 in front of contentpane 110. Computing device 102 can determine that position gesture input120 swipes, while touching display surface 106, down to a position overcontent pane 110, and then releases content pane 112. In response,computing device 102 can position content pane 112 in front of contentpane 110 in animation 122.

Animation 122 can have the appearance of content pane 110 ducking undercontent pane 112 and reappearing behind content pane 112. Computingdevice 102 can animate the ducking. In some implementations, computingdevice 102 can cause content pane 110 to move toward a bottom edge ofdisplay surface 106 until content pane 110 appears to be positionedlower than a visible or invisible floor on which content panes 112, 114,and 116 stand. In some implementations, computing device 102 can reducea height of content pane 110 to make content pane 110 appear shorteruntil content pane reaches a height threshold. In some implementations,computing device 102 can change a display perspective of content pane110 such that content pane 110 appears to be changing from a standingposition to a lying down position.

Before, during, or after the ducking animation, computing device 102 cancause content pane 112 to move forward, e.g., to a position originallyoccupied by content pane 110. Computing device 102 can then causecontent pane 110 to move up behind content pane 112, until content pane110 is at a position originally occupied by content pane 112. Themovement in animation 122 can include keeping the proportions of contentpane 112, or changing the proportions (e.g., by reducing a height) ofcontent pane 112.

Computing device 102 can receive position gesture input 124 for movingcontent pane 112 backward. Position gesture input 124 can be a backwardgesture, where a stylus or finger touches an un-obscured portion ofcontent pane 112 and, while touching the un-obscured portion of contentpane 112, swipes up toward a top edge of display surface 106, appearingin a direction away from a user. In response, computing device 102 canshift content pane 112 and content panes 114 and 116, which are locatedbehind content pane 112, backward (e.g., away from a user). In variousimplementations, distances between content panes 112, 114, and 116 candecrease, or, additionally or alternatively, a last content pane (inthis example, content pane 116) can disappear. Computing device 102 candecrease the distances, remove content pane 116, or both, upondetermining that the backward gesture has reached a threshold (e.g., athreshold distance or a threshold speed).

Position gesture input 124 can move content pane 112 behind content pane114. Computing device 102 can determine that position gesture input 124swipes, while touching content pane 112, up to a position over contentpane 114, and then releases content pane 112. In response, computingdevice 102 can position content pane 112 behind content pane 114 in ananimation.

The animation can have the appearance of content pane 114 ducking undercontent pane 112 and reappear in front of content pane 112. Computingdevice 102 can animate the ducking. In some implementations, computingdevice 102 can cause content pane 114 to move toward a bottom edge ofdisplay surface 106 until content pane 114 appears to be positionedlower than a visible or invisible floor on which content panes 110, 112,and 116 stand. In some implementations, computing device 102 can reducea height of content pane 114 to make content pane 110 appear shorteruntil content pane reaches a height threshold. In some implementations,computing device 102 can change a display perspective of content pane114 such that content pane 114 appears to be changing from a standingposition to a lying down position.

Before, during, or after the ducking animation, computing device 102 cancause content pane 112 to move backward, e.g., to a position originallyoccupied by content pane 114. Computing device 102 can then causecontent pane 114 to move up in front of content pane 112, until contentpane 114 is at a position originally occupied by content pane 112.

Computing device 102 can receive an add pane input. The add pane inputcan include an input moving all content panes 110, 112, 114, and 116backward (e.g., away from a user) for more than a threshold distance. Anew content pane can appear in front of content pane 110. In someimplementations, the add pane input can include a user input by touchingadd pane virtual button 128. In response to determining that a usertouched add pane virtual button 128, computing device 102 can causecontent panes 110, 112, 114, and 116 to move backward to make room forthe new content pane. Computing device 102 can display the new contentpane at the position originally occupied by content pane 110.

Computing device 102 can adjust positions, display perspectives, orboth, of content panes 110, 112, 114, and 116 in response to tilt input132 to simulate a parallax effect. Tilt input 132 can tilt displaysurface 106 such that a distance between one edge (e.g., left edge orbottom edge) of display surface 106 and a viewer (e.g., a user holdingdisplay surface 106) is different from a distance between an oppositeedge (e.g., right edge or top edge, respectively) and the viewer.Computing device 102 can detect tilt input 132 using a motion sensor(e.g., an accelerometer or a gyroscope or both) coupled to computingdevice 102. In response, computing device 102 can adjust a position oran orientation of each of content panes 110, 112, 114, and 116 tosimulate a three-dimensional visual effect (e.g., a parallax effect) ofthe tilt.

For example, in some implementations, upon determining that displaysurface is tilted to the left, where a distance between a left edge ofdisplay surface 106 and a viewer is greater than a distance between aright edge of display surface 106 and a user, computing device 102 canshift the relative positions of content panes 110, 112, 114, and 116.Computing device 102 can move one or more of content panes 110, 112,114, and 116 horizontally, each for a distance determined based on anangle of the tilt and a respective distance between the content pane andthe viewer. The movement of the one or more of content panes 110, 112,114, and 116 can have the visual effect of a content pane in a relativefront position moves to a relative left, and a content pane in arelative back position moves to a relative right.

In some implementations, upon determining that display surface is tiltedto the left, computing device 102 can change an orientation of each ofcontent panes 110, 112, 114, and 116, such that each of content panes110, 112, 114, and 116 appear to be facing right at an angle thatcorresponds to an angle of the tilt.

FIGS. 2A and 2B are diagrams illustrating exemplary animations ofrearranging positions of content panes in a stacked tab view. FIG. 2Acan correspond to animation 122 of FIG. 1. FIG. 2A shows a conceptualview of the animation 122 from a right side of display surface 106. AZ-axis, pointing to a viewer, illustrates the layered spatialrelationship between content panes 110, 112, 114, and 116.

Content panes 110, 112, 114, and 116 can be arranged in a parallelstack, where each of content panes 110, 112, 114, and 116 is parallel toanother. In some implementations, content panes 110, 112, 114, and 116can be arranged in a rolodex stack, where each of content panes 110,112, 114, and 116 appears to point upward or downward to a visible orinvisible horizontal axis 201. Horizontal axis 201 can be below a bottomedge of display surface 106. In some implementations, content panes 110,112, 114 can appear to be attached, each at a bottom edge, to roller202. Roller 202 can be displayed as a floor in display surface 106. Insome implementations, roller 202 can be invisible, and defined by adisplay perspective of content panes 110, 112, 114, and 116.

In animation 122 (where content pane 112 is selected to switch positionwith content pane 110), computing device 102 can move content pane 110downward toward a bottom edge of display surface 106 in motion 204.After motion 204, content pane 110 can appear in position 110 b, whichcan be a supine (e.g., content facing up) position or a prone (e.g.,content facing down) position at a location in front of an originalposition of content pane 110 (e.g., closer to the user on the Z-axis).In some implementations, motion 204 can be a sliding motion along a pathindicated by the arrow as shown in motion 204. In the sliding motion, atop edge of content pane 110 can move down, a bottom edge of contentpane 110 can move toward the viewer until content pane 110 appears to bein a horizontal supine position. In some implementations, motion 204 canbe a flipping motion. In the flipping motion, a bottom edge of contentpane 110 can remain unchanged a top edge of content pane 110 can movetoward a viewer until content pane 110 appears to be in a horizontalprone position.

Computing device 102 can then move content pane 112 forward in motion206, to a position originally occupied by content pane 110. Computingdevice 102 can move content pane 110 from position 110 b to a positionoriginally occupied by content pane 112 in motion 208. If position 110 bis a supine position, motion 208 can be a sliding motion along a pathindicated by the arrow as shown in motion 208. In the sliding motion, atop edge of content pane 110 (the right-most point of the line showing110 b) can move up, a bottom edge of content pane 110 (the left-mostpoint of the line showing 110 b) can move back (e.g., to the right inFIG. 2A, opposite to the direction as shown in the Z-axis) until contentpane 110 stands up at the position occupies the position originallyoccupied by content pane 112. If position 110 b is a prone position,motion 208 can be a flipping motion.

FIG. 2B shows a right-sided view of the animation for moving contentpane 112 behind content pane 114. In the animation, computing device 102can move content pane 114 down in motion 210. After motion 210, contentpane 114 can appear in position 114 b.

Computing device 102 can then move content pane 112 backward in motion214, to a position originally occupied by content pane 114. Computingdevice 102 can move content pane 114 from position 114 b to a positionoriginally occupied by content pane 114 in motion 216. Each of motion210 and motion 216 can be a sliding motion or a flipping motion.

FIGS. 2C and 2D are diagrams illustrating exemplary animations ofrolodex-like operations of a stacked tab view. FIG. 2C illustrates anexemplary rotating motion viewed from a right-side of display surface106. Upon receiving a rotation gesture, e.g., a gesture that swipescross multiple content panes, computing device 102 can cause contentpanes 110, 112, 114, and 116 to rotate (220) around horizontal axis 201.For example, computing device 102 can receive a gesture moving up from aplace at or proximate to a bottom edge of display surface 106 across allof content panes 110, 112, 114, and 116 to a place at or proximate to atop edge of display surface 106, which has the apparent trajectory ofmoving from the front to the back. In response, computing device 102 cancause the rotation (220) movement.

FIG. 2D illustrates exemplary operations of adding a new content pane.In some implementations, computing device 102 can determine thatrotation 220 has caused content pane 110, 112, 114, and 116 to move back(e.g., away from a viewer on the Z-axis) a threshold distance sufficientto place new content pane 222 for display on display surface 106. Inresponse, computing device 102 can display content surface 222 at aposition originally occupied by a front-most content pane (e.g., contentpane 110).

In some implementations, computing device 102 can receive a new contentpane input (e.g., through new pane button 128). In response, computingdevice 102 can move content pane 110, 112, 114, and 116 backwards (e.g.,away from a viewer) until sufficient space in front of content pane 110is created to accommodate new content pane 222. Computing device 102 canadd new content pane 222 in the space in front of content pane 110.

New content pane 222 can correspond to a new display area, initially notassociated with a particular web page. Details on displayed items in newcontent pane 222 are described below in reference to FIGS. 3B and 3C.Alternatively, new content pane 222 can include a snapshot of a contentpage. The content page can be a web page previously opened but notdisplayed in the stacked tab view due to a pre-specified limit on numberof content panes simultaneously displayed in a stacked tab view.

Computing device 102 can determine that, following rotation 220 contentpane 116 has moved to a position that is invisible (e.g., below avirtual floor or completely obscured by other content panes).Additionally or alternatively, computing device 102 can determine, dueto the addition of new content pane 222, the total number of contentpanes, if including content pane 116, which is located the farthest froma viewer, exceeds the pre-specified limit. In response, computing device102 can designate content pane 116 as inactive, and remove content pane116 from display in the stacked tab view. Computing device 102 canre-activate content pane 116 and display content pane 116 upon receivingan input to rotate content panes 222, 110, 112, and 114 forward.

FIG. 3A is a diagram illustrating exemplary operations of closing acontent pane. Computing device 102 can receive deletion gesture input302. Deletion gesture input 302 can include a touch on display surface106 on an un-obscured portion of content pane 112. Deletion gestureinput 302 can include a sideways swiping motion (e.g., toward a leftedge or right edge of display surface 106) while touching theun-obscured portion of content pane 112. Computing device 102 can causecontent pane 112 to move following a direction of the swiping motion.Computing device 102 can determine that a distance of the sidewaysswiping has satisfied a deletion threshold. In response, computingdevice 102 can remove content pane 112 from the stacked tab view.

Upon removal of content pane 112, computing device 102 can move forwardcontent panes 114 and 116, originally behind content pane 112, to occupythe position originally occupied by content pane 112. Alternatively oradditionally, upon removal of content pane 112, computing device 102 canmove content pane 110, originally in front content pane 112, backward tooccupy the position originally occupied by content pane 112.

FIG. 3B is a diagram illustrating an exemplary content pane in grid modeupon selection from a stacked tab view. The exemplary content pane canbe new content pane 222 of FIG. 2.

New content pane 222 may be a new window unassociated with a web page.Upon receiving a selection input, new content pane 222 can enter a fullscreen display mode, where content in new content pane 222 occupiesdisplay surface 106 in place of a stack tab view. New content pane 222can include input box 308 configured to receive text input for a uniformresource locator (URL) of a web site.

New content pane 222 can include grid view area 310. Grid view area 310is a portion of new content pane 222, with or without a border,configured to display images in a grid layout. The grid layout caninclude X number of columns and Y number of rows. The images can includeexemplary images 312, 314, and 316. Images 312, 314, and 316 cancorrespond to a group of links to web sites or remote documents storedin a folder or in a bookmark file. Each of images 312, 314, and 316 cancorrespond to one of the links in the folder or bookmark file.

Computing device 102 can determine images 312, 314, and 316 based ontheir respective content sources. Computing device 102 can retrieve animage designated as a representative image (e.g., a favicon foridentifying a web site or web page). For example, computing device 102can retrieve a favicon from a first web site. Computing device 102 candetermine that the retrieved favicon satisfies a size threshold (e.g.,is at least as large as M×N pixels). In response, computing device 102can adjust (e.g., enlarge or reduce) a size of the retrieved favicon toa predetermined size that fits a grid, and display the adjusted faviconas image 312 in grid view area 310. Upon receiving a user inputselecting image 312, computing device 102 can provide content of thefirst web site for display on display surface 106.

Computing device 102 can retrieve a representative image from a secondweb site. Computing device 102 can determine that the retrieved imagefails to satisfy the size threshold. In response, computing device 102can determine a dominant color of the retrieved image. Computing device102 can determine the dominant color based on a color of most numerousnon-white pixels of the retrieved image, or based on an average color ofthe non-white pixels. Computing device 102 can generate image 314 basedon the dominant color. Generating image 314 can include determining animage based on the dominant color, a size specified for the grid, and animage 315. Image 315 can be an image provided by computing device 102having a color that contrasts to the dominant color. Upon receiving auser input selecting image 314, computing device 102 can provide contentof the second web site for display on display surface 106.

Computing device 102 can determine that a third web site does notprovide a representative image. In response, computing device 102 candetermine image 316, which can be a default image. Computing device 102can then provide image 316 for display in grid view area 310. Uponreceiving a user input selecting image 316, computing device 102 canprovide content of the third web site for display on display surface106.

FIG. 3C is a diagram illustrating an exemplary content pane in list modeupon selection from a stacked tab view. The content pane can be contentpane 110, 112, 114, 116, or 222.

Computing device 102 can display a list of content items saved oncomputing device 102 or a remote server. The list can include contentitems, e.g., locally or remotely saved articles or web pages. The listcan be automatically aggregated from multiple devices based on contentitems viewed by a user on the devices (e.g., on computing device 102 anda second computing device).

Computing device 102 can determine images 320, 322 and 324, eachcorresponding to a respective article or web site, for display in thelist. Determining each of images 320, 322 and 324 can includeidentifying a representative image from the respective article or website. Identifying the representative image can include determining afavicon of a web site, determining a largest image in an article or website, or determining an image that includes a human face. Determiningeach of images 320, 322 and 324 can include cropping the identifiedrepresentative image or resizing the identified representative image.

FIG. 3D is a diagram illustrating an exemplary snapshot operations of acontent pane in a stacked tab view. The content pane can be content pane110, 112, 114, 116, or 222.

Computing device 102 can receive navigation input 325. Navigation input325 can be a swipe gesture input on display surface 106 displaying firstcontent page 326. First content page 326 can be a web page includingfirst page content 327. Computing device 102 can determine that, basedon content size and user scroll history, navigation toolbar 328 hasreduced height 330 when first content page 326 is displayed. Innavigation toolbar 328 having reduced height 330, computing device 102can display a web page title and hide one or more tool items (e.g., anavigation box configured to receive user-typed URL).

Upon receiving navigation input 325, computing device 102 can move firstcontent page 326 out of display surface 106 in animation following adirection of the swipe gesture input (e.g., to the right). Computingdevice 102 can fill the space left by first content page 326 usingsnapshot 332 of a second content page. Snapshot 332 can include contentitem 333. Computing device 102 can create snapshot 332 of the secondcontent page upon determining a user is leaving the second content page.For example, upon receiving navigation input 325, computing device 102can generate a snapshot of first content page 326, and store thegenerated snapshot for display in the future upon determining a user isnavigating back to first content page 326. Each content pane can beassociated with multiple snapshots. For example, the exemplary contentpane of FIG. 3D can be associated with snapshot 332 and the snapshot offirst content page 326.

Snapshot 332 can be taken at a time when navigation toolbar 328 had fullheight 334. Computing device can display navigation toolbar 328 in fullheight 334 based on browsing actions by a user on the second contentpage (e.g., when the user scrolls up to the top of the second contentpage). At a time when swipe gesture input is at position 336 (e.g., neara vertical center of display surface 106), a first portion (e.g., aright side) of navigation toolbar 328 can have reduced height 330, and asecond portion (e.g., a left side) of navigation toolbar 328 can havefull height 334. Before first content page 326 completely moves out ofdisplay surface 106, computing device can provide for displayplaceholder 338 to occupy a space that is not covered by snapshot 332.The space can have a height that is the difference in height betweenreduced height 330 and full height 334. The space can have a width thatis the distance between a left edge of display surface 106 and position336. Computing device 102 can position placeholder 338 betweennavigation toolbar 328 and snapshot 332.

Computing device 102 can determine content in placeholder 338 based oncontent of the second web page. For example, computing device 102 candetermine a background color of the second web page, and designate thebackground color as a color of placeholder 338. Upon determining that arendering condition has been satisfied (e.g., upon determining thatfirst content page 326 has completely moved out of display surface 106),computing device 102 can replace the content of placeholder 338 with auser interface item of the full-height navigation toolbar 328 that ishidden when navigation toolbar 328 has reduced height. The userinterface item can be a navigation box configured to receive user-typedURL.

While filling the space using snapshot 332 of the second content page,computing device 102 can download content from a web site serving thesecond content page. Upon determining that a replacement condition hasbeen satisfied, computing device 102 can remove snapshot 332, and renderthe downloaded content for display. The downloaded content can matchsnapshot 332 or be different from snapshot 332. For example, thedownload content can include content item 340, which can correspond tocontent item 333 of snapshot 332 but located at a position that isdifferent from a position of content item 333. Removing snapshot 332 caninclude cross fading snapshot 332, where snapshot 332, which overlays onthe downloaded content, gradually becomes transparent to reveal thedownloaded content, until snapshot 332 disappears.

The replacement condition can include one or more rules, examples ofwhich are provided below. In some implementations, computing device 102can determine that the replacement condition is satisfied upondetermining that a duration of a download reaches or exceeds a timeoutthreshold (e.g., X seconds).

In some implementations, computing device 102 can determine that thereplacement condition is satisfied upon determining that an amount ofdownloaded content has satisfied a size threshold. Computing device 102can determine the amount of downloaded content based on a number ofobjects downloaded. Computing device 102 can compare the number ofobjects downloaded with a size of a render tree, which can be determinedat a time when snapshot 332 was taken. The size of the render tree caninclude a number of objects for rendering the second content page.Computing device 102 can determine that the amount of downloaded contenthas satisfied the size threshold upon determining that the number ofdownloaded objects is more than X percent of the render tree size.

In some implementations, computing device 102 can determine that thereplacement condition is satisfied upon determining that, based oninformation or instruction from a web site serving the second contentpage, that no download will occur. In response, computing device 102 cango to a previously viewed content page instead of downloading contentfrom the web site. Computing device 102 can remove snapshot 332 after apause period (e.g., X milliseconds).

In some implementations, computing device 102 can determine that thereplacement condition is satisfied upon determining that downloadedcontent will not match the snapshot. For example, computing device 102can determine that a root object of the downloaded content does notmatch a root object in a render tree associated with snapshot 332.

Exemplary Device Components

FIG. 4 is a diagram illustrating components of exemplary stacked tabview subsystem 402 of a computing device 102. Each component of tab viewsubsystem 402 can include hardware and software components.

Subsystem 402 can include content processing subsystem 404. Contentprocessing subsystem 404 can include one or more processors configuredto execute an application program (e.g., a web browser) that displays astacked tab view. Content processing subsystem 404 can include contentpane manager 406. Content pane manager 406 is a component of contentprocessing subsystem 404 configured to generate a stacked view ofcontent panes (e.g., content panes 110, 112, 114, 116, and 222) andmanage movements and animation of the content panes.

Content processing subsystem 404 can include page image manager 408.Page image manager 408 is a component of content processing subsystem404 configured to determine representative images (e.g., images 312,314, 316, 320, 322, and 324) of content pages.

Content processing subsystem 404 can include snapshot manager 410.Snapshot manager 410 is a component of content processing subsystem 404configured to generate snapshots (e.g., snapshot 332) of content pagesand to manage the snapshots associated with multiple content panes.

Content processing subsystem 404 can include display interface 412.Display interface 412 is a component of content processing subsystem 404configured to interact with display surface 106, including receivinginputs (e.g., a touch input or a gesture input) from display surface 106and provide the input to content pane manager 406, page image manager408, or snapshot manager 410. Display interface 412 can provide contentgenerated by content pane manager 406, page image manager 408, andsnapshot manager 410 for display on display surface 106.

Subsystem 402 can include communication subsystem 424. Communicationsubsystem 424 is a component of subsystem 402 that includes an antenna,a wireless processor (e.g., a baseband processor, Wi-Fi™ processor, orBluetooth™ processor), and software or firmware that causes the wirelessprocessor to perform operations of downloading content from one or morewebsites, and provide the content to content pane manager 406, pageimage manager 408, or snapshot manager 410.

Exemplary Procedures

FIG. 5A is a flowchart of exemplary procedure 500 of non-intrusiveregion notification. Procedure 500 can be performed by computing device102.

Computing device 102 can provide (502), for display on a display surface(e.g., display surface 106), a front content pane (e.g., content pane110) and a back content pane (e.g., content pane 112). Each of the frontcontent pane and the back content pane can be a web page or a snapshotof a web page. The snapshot can include an image of the web page. Thefront content pane can appear to be positioned in front of the backcontent pane and partially obscuring the back content pane. A distancein a depth dimension can appear to separate the front content pane andthe back content pane.

In some implementations, the front content pane and the back contentpane can be arranged to have an appearance that a vertical edge of thefront content pane and a vertical edge of the back content pane point toa horizontal axis (e.g., horizontal axis 201) below the front contentpane and the back content pane. The horizontal axis can be a visibleaxis displayed on the display surface or an invisible axis defined bydisplay perspectives of the front content pane and the back content paneas illustrated in FIGS. 2A-2D. Computing device 102 can receive apushback gesture input touching at least one of the front content paneor the back content pane and swiping upward. In response, computingdevice 102 can animate a rotation (e.g., rotation 220) of the frontcontent pane and back content pane around the horizontal axis, includingreducing a size of the front content pane and the back content pane andchanging display perspectives of the front content pane and the backcontent pane to have an appearance of moving away from a viewer.

Computing device 102 can receive (504) a position gesture input (e.g.,position gesture input 120) touching a portion of the back content panenot obscured by the front content pane and swiping to a position thatappears to be in front of the front content pane.

In response to the position gesture input, computing device 102 canswitch (506) positions of the front content pane and back content panein an animated motion. In the animated motion, the front content panecan appear to move toward a bottom edge of the display surface. The backcontent pane can appear to move forward to occupy a position originallyoccupied by the front content pane. The front content pane can appear tomove up behind the back content pane to occupy a position originallyoccupied by the back content pane.

In some implementations, after switching the positions in stage 506,computing device 102 can receive (508) a second position gesture input(e.g., position gesture input 124) touching the back content pane,which, after the switching, appears to be in front of the front contentpane. The second position gesture can swipe to a position that appearsto be behind the front content pane (now in the back).

In response to the second position gesture input, computing device 102can move (510) the back content pane behind the front content pane in asecond animated motion. In the second animated motion, the front contentpane can appear to move toward the bottom edge of the display surface.The back content pane can appear to move back to occupy the positionoriginally occupied by the back content pane. Then, the front contentpane can appear to move up in front of the back content pane to occupythe position originally occupied by the front content pane.

In some implementations, computing device 102 can receive a deletiongesture input (e.g., deletion gesture input 302). The deletion gestureinput can touch a portion of the front content pane or the back contentpane and swipe sideways. In response, computing device 102 can removethe touched content pane from display in an animation. In the animation,the touched content pane can slide off from the display surfaceaccording to a swiping direction of the deletion gesture input.

In some implementations, computing device 102 can receive a new contentpane input for adding a new content pane to display in the displaysurface. In response, computing device 102 can add a new content pane infront of both the front content pane and the back content pane in ananimation.

In some implementations, device 102 can receive a tilt input (e.g., tiltinput 132) tilting the display surface to a position where a distancebetween a first vertical edge of the display surface and a viewer isgreater than a distance between a second vertical edge of the displaysurface to a viewer. In response, computing device can change anapparent plane of the front content pane and an apparent plane of theback content pane to simulate a three-dimensional effect of the tilt.The change can include an angular change or a shifting change.

FIG. 5B is a flowchart illustrating exemplary procedure 520 ofdisplaying a content pane in grid mode. Procedure 520 can be performedby computing device 102.

Computing device 102 can receive (522) a request to populate a contentpane. The request can include a user input to create a new content pane(e.g., new content pane 222) or a user input to access a bookmark page.

Computing device 102 can retrieve (524) from a content repository, acollection of one or more links to web sites. The content repository canbe a folder stored locally on computing device 102 or remotely fromcomputing device 102. The content repository can be a bookmark page or aread list.

Computing device 102 can determine (526) one or more images. Each imagecan correspond to a web site link in the collection. Determining eachimage can include, upon determining that a representative image providedby a corresponding web site satisfies a size threshold, designating therepresentative image as the image corresponding to the web site.Determining each image can include, upon determining that therepresentative image fails to satisfy the size threshold, generating theimage based on the representative image, and designating the generatedimage as the image corresponding to the web site. Generating the image(e.g., image 314) can include determining a dominating color based onthe representative image, and generating an image corresponding to theweb site based on the dominating color.

Computing device 102 can provide (528) the one or more images fordisplay in a grid pattern (e.g., in grid view area 310) or a listpattern (e.g., as shown in FIG. 3C) in the content pane in response tothe request.

FIG. 5C is a flowchart illustrating procedure 540 of managing snapshots.Procedure 540 can be performed by computing device 102.

In response to a navigation input for navigating from a first contentpage to a second content page (e.g., navigation input 325), computingdevice 102 can identify (542) a snapshot (e.g., snapshot 332) of thesecond content page. The snapshot can include an image of the secondcontent page and being associated with a web site serving the secondcontent page.

Computing device 102 can determine (544) that a toolbar (e.g.,navigation toolbar 328) associated with the first content page have afirst dimension (e.g., reduced height 330) that is less than a seconddimension (e.g., full height 334) of a toolbar associated with thesnapshot.

Computing device 102 can determine (546) a placeholder (e.g.,placeholder 338) based on a difference between the first dimension andthe second dimension, and a background color associated with the secondcontent page.

Computing device 102 can provide (548) the placeholder for display inassociation with the snapshot, in an animation navigating from the firstcontent page to the second content page in response to the navigationinput. Computing device 102 can replace (550) the placeholder with acontent item of the toolbar upon completion of the animation.

In some implementations, computing device 102 can determine multiplesnapshots. Each snapshot can be associated with a web site serving a webpage. Each web site can associated with a content pane of a web browserhaving multiple content panes. For example, content panes 110, 112, 114,116, and 222 each can be associated with multiple snapshots generatedduring navigation.

Computing device 102 can receive a signal from an operating system ofcomputing device 102 or from an application program. The signal canindicate a level of memory usage pressure (e.g., medium, high, orcritical). In response, computing device 102 can remove one or moresnapshots based on the level of memory usage pressure.

For example, upon determining that the signal indicates a medium memoryusage pressure level, computing device 102 can iterate through contentpanes designated as inactive (e.g., content panes not currentlydisplayed in full screen mode). In the iteration, computing device 102can remove one or more snapshots associated with the inactive contentpanes. Upon determining that the signal indicates a high memory usagepressure level, computing device 102 can remove one or more snapshotsassociated with the inactive content panes and one or more snapshotsassociated with an active content pane (e.g., a content pane currentlydisplayed in full screen mode) except a current snapshot, a forwardsnapshot, and a previous snapshot. The current snapshot can be an imageof a content page currently displayed in the content pane. The forwardsnapshot page reachable when navigating from the current displayed webpage in a first direction (e.g., to a right side of the currentdisplayed web page). The previous snapshot page reachable whennavigating from the current displayed web page in a second direction(e.g., to a left side of the current displayed web page). Upondetermining that the signal indicates a critical memory usage pressurelevel, computing device 102 can remove all snapshots.

Exemplary Device Architecture

FIG. 6 is a block diagram illustrating exemplary device architecture 600of computing device 102 implementing the features and operations ofFIGS. 1-5. Computing device 102 can be a laptop computer, a tabletcomputer, a smart phone, or a wearable computing device (e.g., a smartwristwatch). Computing device 102 can include memory interface 602, oneor more data processors, image processors and/or processors 604, andperipherals interface 606. Memory interface 602, one or more processors604 and/or peripherals interface 606 can be separate components or canbe integrated in one or more integrated circuits. Processors 604 caninclude one or more application processors and one or more wirelessprocessors. The various components in computing device 102, for example,can be coupled by one or more communication buses or signal lines.

Sensors, devices, and subsystems can be coupled to peripherals interface606 to facilitate multiple functionalities. For example, motion sensor610, light sensor 612, and proximity sensor 614 can be coupled toperipherals interface 606 to facilitate orientation, lighting, andproximity functions of the mobile device. Location processor 615 (e.g.,GPS receiver) can be connected to peripherals interface 606 to providegeopositioning. Electronic magnetometer 616 (e.g., an integrated circuitchip) can also be connected to peripherals interface 606 to provide datathat can be used to determine the direction of magnetic North. Thus,electronic magnetometer 616 can be used as an electronic compass. Motionsensor 610 can include one or more accelerometers configured todetermine change of speed and direction of movement of the mobiledevice. Barometer 617 can include one or more devices connected toperipherals interface 606 and configured to measure pressure ofatmosphere around the mobile device.

Camera subsystem 620 and an optical sensor 622, e.g., a charged coupleddevice (CCD) or a complementary metal-oxide semiconductor (CMOS) opticalsensor, can be utilized to facilitate camera functions, such asrecording photographs and video clips.

Communication functions can be facilitated through one or more wirelesscommunication subsystems 624, which can include radio frequencyreceivers and transmitters and/or optical (e.g., infrared) receivers andtransmitters. The specific design and implementation of thecommunication subsystem 624 can depend on the communication network(s)over which a mobile device is intended to operate. For example, a mobiledevice can include communication subsystems 624 designed to operate overa GSM network, a GPRS network, an EDGE network, a Wi-Fi™ or WiMax™network, and a Bluetooth™ network. In particular, the wirelesscommunication subsystems 624 can include hosting protocols such that themobile device can be configured as a base station for other wirelessdevices.

Audio subsystem 626 can be coupled to a speaker 628 and a microphone 630to facilitate voice-enabled functions, such as voice recognition, voicereplication, digital recording, and telephony functions. Audio subsystem626 can be configured to receive voice commands from the user.

I/O subsystem 640 can include touch surface controller 642 and/or otherinput controller(s) 644. Touch surface controller 642 can be coupled toa touch surface 646 or pad. Touch surface 646 and touch surfacecontroller 642 can, for example, detect contact and movement or breakthereof using any of a plurality of touch sensitivity technologies,including but not limited to capacitive, resistive, infrared, andsurface acoustic wave technologies, as well as other proximity sensorarrays or other elements for determining one or more points of contactwith touch surface 646. Touch surface 646 can include, for example, atouch screen.

Other input controller(s) 644 can be coupled to other input/controldevices 648, such as one or more buttons, rocker switches, thumb-wheel,infrared port, USB port, and/or a pointer device such as a stylus. Theone or more buttons (not shown) can include an up/down button for volumecontrol of speaker 628 and/or microphone 630.

In one implementation, a pressing of the button for a first duration maydisengage a lock of the touch surface 646; and a pressing of the buttonfor a second duration that is longer than the first duration may turnpower to computing device 102 on or off. The user may be able tocustomize a functionality of one or more of the buttons. The touchsurface 646 can, for example, also be used to implement virtual or softbuttons and/or a keyboard.

In some implementations, computing device 102 can present recorded audioand/or video files, such as MP3, AAC, and MPEG files. In someimplementations, computing device 102 can include the functionality ofan MP3 player. Computing device 102 may, therefore, include a pinconnector that is compatible with the iPod. Other input/output andcontrol devices can also be used.

Memory interface 602 can be coupled to memory 650. Memory 650 caninclude high-speed random access memory and/or non-volatile memory, suchas one or more magnetic disk storage devices, one or more opticalstorage devices, and/or flash memory (e.g., NAND, NOR). Memory 650 canstore operating system 652, such as Darwin, RTXC, LINUX, UNIX, OS X,WINDOWS, iOS, or an embedded operating system such as VxWorks. Operatingsystem 652 may include instructions for handling basic system servicesand for performing hardware dependent tasks. In some implementations,operating system 652 can include a kernel (e.g., UNIX kernel).

Memory 650 may also store communication instructions 654 to facilitatecommunicating with one or more additional devices, one or more computersand/or one or more servers. Memory 650 may include graphical userinterface instructions 656 to facilitate graphic user interfaceprocessing; sensor processing instructions 658 to facilitatesensor-related processing and functions; phone instructions 660 tofacilitate phone-related processes and functions; electronic messaginginstructions 662 to facilitate electronic-messaging related processesand functions; web browsing instructions 664 to facilitate webbrowsing-related processes and functions; media processing instructions666 to facilitate media processing-related processes and functions;GPS/Navigation instructions 668 to facilitate GPS and navigation-relatedprocesses and instructions; camera instructions 670 to facilitatecamera-related processes and functions; magnetometer data 672 andcalibration instructions 674 to facilitate magnetometer calibration. Thememory 650 may also store other software instructions (not shown), suchas security instructions, web video instructions to facilitate webvideo-related processes and functions, and/or web shopping instructionsto facilitate web shopping-related processes and functions. In someimplementations, the media processing instructions 666 are divided intoaudio processing instructions and video processing instructions tofacilitate audio processing-related processes and functions and videoprocessing-related processes and functions, respectively. An activationrecord and International Mobile Equipment Identity (IMEI) or similarhardware identifier can also be stored in memory 650.

Memory 650 can store browser management instructions 676. Browsermanagement instructions can include content pane management instructionsthat, when executed, cause processor 604 to perform operations ofcontent pane manager 406, including executing procedure 500. Browsermanagement instructions 676 can include page image managementinstructions that, when executed, cause processor 604 to performoperations of page image manager 408, including executing procedure 520.Browser management instructions 676 can include snapshot managementinstructions that, when executed, cause processor 604 to performoperations of snapshot manager 410, including executing procedure 540.

Each of the above identified instructions and applications cancorrespond to a set of instructions for performing one or more functionsdescribed above. These instructions need not be implemented as separatesoftware programs, procedures, or modules. Memory 650 can includeadditional instructions or fewer instructions. Furthermore, variousfunctions of the mobile device may be implemented in hardware and/or insoftware, including in one or more signal processing and/or applicationspecific integrated circuits.

Exemplary Operating Environment

FIG. 7 is a block diagram of exemplary network operating environment 700for the computing devices implementing the features and operations ofFIGS. 1-5. Each of mobile devices 702 a and 702 b can be computingdevice 102. Mobile devices 702 a and 702 b can, for example, communicateover one or more wired and/or wireless networks 710 in datacommunication. For example, a wireless network 712, e.g., a cellularnetwork, can communicate with a wide area network (WAN) 714, such as theInternet, by use of a gateway 716. Likewise, an access device 718, suchas an 802.11g wireless access point, can provide communication access tothe wide area network 714.

In some implementations, both voice and data communications can beestablished over wireless network 712 and the access device 718. Forexample, mobile device 702 a can place and receive phone calls (e.g.,using voice over Internet Protocol (VoIP) protocols), send and receivee-mail messages (e.g., using Post Office Protocol 3 (POP3)), andretrieve electronic documents and/or streams, such as web pages,photographs, and videos, over wireless network 712, gateway 716, andwide area network 714 (e.g., using Transmission ControlProtocol/Internet Protocol (TCP/IP) or User Datagram Protocol (UDP)).Likewise, in some implementations, the mobile device 702 b can place andreceive phone calls, send and receive e-mail messages, and retrieveelectronic documents over the access device 718 and the wide areanetwork 714. In some implementations, mobile device 702 a or 702 b canbe physically connected to the access device 718 using one or morecables and the access device 718 can be a personal computer. In thisconfiguration, mobile device 702 a or 702 b can be referred to as a“tethered” device.

Mobile devices 702 a and 702 b can also establish communications byother means. For example, wireless mobile device 702 a can communicatewith other wireless devices, e.g., other mobile devices, cell phones,etc., over the wireless network 712. Likewise, mobile devices 702 a and702 b can establish peer-to-peer communications 720, e.g., a personalarea network, by use of one or more communication subsystems, such asthe Bluetooth™ communication devices. Other communication protocols andtopologies can also be implemented.

Mobile device 702 a or 702 b can, for example, communicate with one ormore services 730 and 740 over the one or more wired and/or wirelessnetworks. For example, first content service 730 can serve first contentpage 326. Second content service 740 can serve, to mobile devices 702 aand 702 b, a second content page based on which mobile devices 702 a and702 b can create snapshot 332.

Mobile device 702 a or 702 b can also access other data and content overthe one or more wired and/or wireless networks. For example, contentpublishers, such as news sites, Really Simple Syndication (RSS) feeds,web sites, blogs, social networking sites, developer networks, etc., canbe accessed by mobile device 702 a or 702 b. Such access can be providedby invocation of a web browsing function or application (e.g., abrowser) in response to a user touching, for example, a Web object.

A number of implementations of the invention have been described.Nevertheless, it will be understood that various modifications can bemade without departing from the spirit and scope of the invention.

1-11. (canceled)
 12. A method comprising: at a computing deviceincluding a display, one or more processors, and non-transitory memory:displaying, on the display, a visual stack that includes a plurality ofcontent panes including a first content pane and a second content pane,wherein the plurality of content panes is spaced apart along a virtualz-axis; while displaying the plurality of content panes, detecting atilt input corresponding to a change in orientation of the computingdevice; and in response to detecting the tilt input, changing display ofthe plurality of content panes.
 13. The method of claim 12, wherein thecomputing device includes one or more motion sensors, and whereindetecting the tilt input corresponds to detecting the change inorientation of the computing device by the one or more motion sensors.14. The method of claim 13, wherein the one or more motion sensorscorrespond to at least one of an accelerometer or a gyroscope.
 15. Themethod of claim 12, wherein changing display of the plurality of contentpanes includes changing respective positions or orientations of theplurality of content panes.
 16. The method of claim 15, wherein changingthe respective positions or orientations of the plurality of contentpanes includes shifting the relative positions of the first content paneand the second content pane.
 17. The method of claim 12, whereinchanging display of the plurality of content panes includes changing therespective horizontal positions of the plurality of content panes inresponse to determining that the tilt input is at least partially in ahorizontal direction.
 18. The method of claim 12, wherein changingdisplay of the plurality of content panes includes an angular orshifting change to the display of the plurality of content panes. 19.The method of claim 12, wherein changing display of the plurality ofcontent panes includes changing an apparent pane of the first contentpane and an apparent pane of the second content pane to simulate athree-dimensional tilting effect.
 20. The method of claim 12, whereinthe display corresponds to a heads-up display or a head-mounted display.21. The method of claim 12, wherein the computing device includes atouch-sensitive surface, the method further comprising: detecting, atthe touch-sensitive surface, a user input selecting one of the pluralityof content panes; and in response to detecting the user input,maintaining display of the selected one of the plurality of contentpanes and removing display of the other plurality of content panes. 22.A computing device comprising: a display; one or more processors; and anon-transitory computer-readable storage medium coupled to the computingdevice, the non-transitory computer-readable storage medium storingcomputer instructions operable to cause the computing device to performoperations comprising: displaying, on the display, a visual stack thatincludes a plurality of content panes including a first content pane anda second content pane, wherein the plurality of content panes is spacedapart along a virtual z-axis; while displaying the plurality of contentpanes, detecting, by the one or more motion sensors, a tilt inputcorresponding to a change in orientation of the computing device; and inresponse to detecting the tilt input, changing display of the pluralityof content panes.
 23. The computing device of claim 22, wherein thecomputing device includes one or more motion sensors, and whereindetecting the tilt input corresponds to detecting the change inorientation of the computing device by the one or more motion sensors.24. The computing device of claim 23, wherein the one or more motionsensors correspond to at least one of an accelerometer or a gyroscope.25. The computing device of claim 22, wherein changing display of theplurality of content panes includes shifting relative positions of thefirst content pane and the second content pane.
 26. The computing deviceof claim 22, wherein changing display of the plurality of content panesincludes changing an apparent pane of the first content pane and anapparent pane of the second content pane to simulate a three-dimensionaltilting effect.
 27. A non-transitory computer-readable storage mediumcoupled to a computing device with one or more processors, and adisplay, the non-transitory computer-readable storage medium storingcomputer instructions operable to cause the computing device to performoperations comprising: displaying, on the display, a visual stack thatincludes a plurality of content panes including a first content pane anda second content pane, wherein the plurality of content panes is spacedapart along a virtual z-axis; while displaying the plurality of contentpanes, detecting, by the one or more motion sensors, a tilt inputcorresponding to a change in orientation of the computing device; and inresponse to detecting the tilt input, changing display of the pluralityof content panes.
 28. The non-transitory computer-readable storagemedium of claim 27, wherein the computing device includes one or moremotion sensors, and wherein detecting the tilt input corresponds todetecting the change in orientation of the computing device by the oneor more motion sensors.
 29. The non-transitory computer-readable storagemedium of claim 28, wherein the one or more motion sensors correspond toat least one of an accelerometer or a gyroscope.
 30. The non-transitorycomputer-readable storage medium of claim 27, wherein changing displayof the plurality of content panes includes shifting relative positionsof the first content pane and the second content pane.
 31. Thenon-transitory computer-readable storage medium of claim 27, whereinchanging display of the plurality of content panes includes changing anapparent pane of the first content pane and an apparent pane of thesecond content pane to simulate a three-dimensional tilting effect.